import React, { Component } from 'react'

class TodoHeader extends Component {
  ipRef = React.createRef()
  add = (e) => {
    if (e.keyCode === 13) {
      // console.log(e.target.value)
      // console.log(this.ipRef.current.value)
      this.props.add(this.ipRef.current.value)
      this.ipRef.current.value = ''
    }
  }
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          ref={this.ipRef}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          onKeyUp={this.add}
        />
      </header>
    )
  }
}

export default TodoHeader
